
<template >
  <div >
      <el-container class="container">
  <el-header class="songsheet-tab">
      <div class="tab-name">{{songsheettitle}}</div>
      <div class="tab-select">
        <el-popover
            placement="bottom"
            title="全部风格"
            width="600"
            trigger="click"
            ref="popoverRef"
            :offset="200"
            @show="showPopover">
            <div class="song-style" v-for="(value,key) in categories" :key="key">
                <el-row>
                    <el-col :span="2"><div class="song-style-title">{{value}} </div></el-col>
                    <el-col :span="22">
                        <template v-for="(item,index) in catlist" >
                            <div :class="activeIndex===index&activeKey===Number(key)?'cat-list-active':'cat-list'" :key="index" v-if="item.category===Number(key)" @click="catClick(item.name,Number(key),index)">{{item.name}}  </div>
                        </template>
                    </el-col>
                </el-row>

            </div>
            <el-button slot="reference" size="small" class="select-cat-button">选择分类 </el-button>
        </el-popover>
      </div>
      <div class="tab-hot">热门</div>
      <!-- 清除浮动 -->
      <div class="clearfix"></div>
      <div class="line"></div>
  </el-header>
  <el-main>
      <div v-if="loading" class="loading" v-loading="loading" ></div>
      <!-- 热门歌单列表 -->
        <div class="music-list" v-if="!loading">
            <!-- 请求接口，将 热门歌单 循环渲染 -->
            <div  @click="songsheetclick(item.id)" class="songsheet" v-for="item in musiclist" :key="item.id" >
                <div class="songsheet-images" >
                    <el-image class="coverimg" :src="item.coverImgUrl" lazy></el-image>
                    <el-image class="avatarimg" :src="item.creator.avatarUrl" lazy></el-image>
                </div>
                <p class="song-name">{{item.name}}</p>
                <div class="creator">
                    by
                    <span class="creator-name">{{item.creator.nickname}}</span>
                </div>
                <div class="playcount">
                    {{item.playCount | countFormat}}
                    <i class="el-icon-sort-up"></i>
                </div>
            </div>
        </div>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                v-if="showPaginationVisable"
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-size="30"
                :total="total">
            </el-pagination>
            </div>
  </el-main>
  <el-footer></el-footer>
</el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分类信息
      catlist: [],
      //   风格种类
      categories: [],
      //   歌单列表
      musiclist: [],
      //   获取歌单 请求参数
      queryinfo: {
        order: 'hot',
        limit: 30,
        cat: '',
        offset: 0
      },
      total: '',
      //   控制分页组件的显示，让其在页面加载完后再显示
      showPaginationVisable: false,
      //   控制类型选中状态 key和index
      activeIndex: 3,
      activeKey: 0,
      //   歌单分类名称 title
      songsheettitle: '华语',
      //   控制loading
      loading: false
    }
  },
  created () {
    //   获取分类
    this.getCategories()
    this.getMusicList('华语')
  },
  methods: {
    //   获取分类
    async getCategories () {
      const { data: res } = await this.$http.get('/playlist/catlist')
      if (res.code !== 200) return this.$message.error('获取分类信息失败')
      this.catlist = res.sub
      this.categories = res.categories
      console.log('getMvInfo this.categories:', this.categories)
    },
    // 点击分类，执行函数
    catClick (cat, key, index) {
    //   console.log(cat, key, index)
      // 显示选中状态
      this.activeIndex = index
      this.activeKey = key
      //   显示选中的分类名称
      this.songsheettitle = cat
      // 关闭 popover
      this.$refs.popoverRef.doClose()
      //   获取歌单列表
      this.getMusicList(cat)
    },
    // 显示 Popover 时触发的方法
    showPopover () {
      // 本来是想控制选中 类型 样式的，但用不到了
      // 第一次打开 pop 弹出框时默认显示选中 华语
    //   this.activeIndex = 3
    //   this.activeKey = 0
    //   console.log('showPopover:', this.activeIndex)
    },
    // 歌单
    async getMusicList (cat) {
      this.loading = true
      this.queryinfo.cat = cat

      const { data: res } = await this.$http.get('/top/playlist', { params: this.queryinfo })
      if (res.code !== 200) return this.$message.error('获取歌单失败')
      this.musiclist = res.playlists
      this.total = res.total
      console.log('musiclist:', this.musiclist)
      setTimeout(() => (this.loading = false), 500)
      //   当列表数据渲染完成后再显示分页控件
      this.$nextTick(() => {
        this.showPaginationVisable = true
      })
    },
    // 监听 页码 变化时间
    handleCurrentChange (pageNum) {
      console.log(pageNum)
      this.queryinfo.offset = pageNum - 1
      this.getMusicList()
    },
    //  点击歌单跳转详情
    songsheetclick (Id) {
      console.log(Id)
      //   跳转页面
      this.$router.push({ path: `/songsheet/songsheetdetail/${Id}` })
    }
  }
}
</script>
<style scoped>
.container{
    /* border: 1px solid red; */
    width: 90%;
    margin: 0 auto;
}

.songsheet-tab{
    display: block;
    /* border: 1px solid green; */
    padding-top: 25px;
    height: 80px !important;
    position: relative;
}
.tab-name{
    float: left;
    font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
    font-size: 24px;
    margin-left: 25px;
    line-height: 40px;
}
/* 选择分类 */
.tab-select{
    float: left;
    margin-left: 10px;
    line-height: 40px;
}
.tab-hot{
    float: right;
    line-height: 40px;
    /* 使right生效 */
    position: absolute;
    right: 25px;
    background-color: #ff4757;
    color: white;
    border-radius: 3px;
    padding: 0px 10px;
}
.line{
    border-bottom: 2px solid #c20c0c;
    width: 95%;
    margin: 0 auto;
    margin-top:10px;

}
/* 选择分类 按钮 */
.select-cat-button{
    bottom: 10px;
}
.song-style{
    width: 100%;
    min-height: 20px;
    margin-top: 10px;
}
.song-style-title{
    float: left;
    width: 80%;
    border-right: 1px solid #d8d8d8;
    font-weight: bold;
}
.cat-list{
    height: 20px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    color: #333;
    border-right: 1px solid #d8d8d8;
    padding-right: 6px;
    cursor: pointer;

}
.cat-list:hover{
    color: #ff4757;
}
.cat-list-active{
    height: 20px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    color: white;
    border-right: 1px solid #d8d8d8;
    padding-right: 6px;
    cursor: pointer;
    background-color: #ff4757;
    padding: 1px 5px;
    border-radius: 10px;
}
/* 歌曲列表样式 */
.songsheet {
    overflow: hidden;
    position: relative;
    float: left;
    margin: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    width: calc(20% - 20px);
    cursor: pointer;

}

/* 监听屏幕的宽度，当宽度小于1000px时，元素属性改变 */
    @media screen and (max-width:750px){
        .songsheet{
                width: calc(33.3% - 20px);
            }
        }
/* 2张图片样式 */
.songsheet-images{
    /* 只有父元素设置 position为absolute或relative 时，子元素用absolute才能相对于当前父元素定位，否则
    会继续向上找已经定位过的父元素 */
    position: relative;
    width:100%;
    /* 为了保持高度与宽度一致--1 */
    height: 0;
    padding-top: 100%;
    /* 图片拉近时，高度会变大，因此需要隐藏高度上溢出的部分 */
    overflow: hidden;
}
/* 鼠标悬浮时，图片拉近效果 */
.coverimg:hover {
    /* 悬浮时拉近图片 */
    transform: scale(1.1);
    /* 延时 */
    transition: all 1s ease 0s;
}
/* 封面图片样式 */
.coverimg {
    border-radius: 3px;
     /* max-height: 135px; */
     /* 缩小时，延时1s */
     transform: scale(1);
     /* 延时 */
     transition: all 1s ease 0s;
    /* 父元素有了padding值，子元素则需修改定位 以显示在正确位置 -2*/
     position: absolute;
     top: 0;
}

/* 歌曲创建人头像图片样式 */

.avatarimg{
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 25%;
    border-radius: 50%;
}
/* 歌曲名称样式 */
.song-name {
    overflow: hidden;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    margin: 0;
    height:37px;
    display: -webkit-box;
     -webkit-box-orient:vertical;
    -webkit-line-clamp: 2;
}
.creator{
    font-size: 13px;
    overflow: hidden;
    color: #666;
    /* 文本不换行 */
    white-space: nowrap;
    /* 显示省略号 */
    text-overflow: ellipsis;
    line-height: 18px;

}
.creator-name{
    color: #666;
    line-height: 18px;
}
/* 播放量样式 */
.playcount{
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 60%;
    color: #fff;
    background: rgba(0,0,0,.6);
    padding: 5% 5%;
    /* 延时 */
    transition: 0.4s ease-out;
    border-bottom-left-radius: 5px;
    cursor: pointer;
    transition: all 0.4s ease 0s;
}
/* 鼠标悬浮在歌曲上时 改变播放数量的样式 */
.songsheet:hover .playcount {
    color: #2ed573;
    transition: all 0.4s ease 0s;
}
.el-icon-sort-up{
    transition: all 0.4s ease 0s;
}
/* 鼠标悬浮在歌曲上时 改变播放数量 icon 的样式 */
.songsheet:hover .playcount .el-icon-sort-up{
    /* 悬浮 90 度 */
    transform: rotate(90deg);
    /* 加粗 */
    font-weight: 1000;
    /* 延时 */
    transition: all 0.4s ease 0s;
}
/* 分页样式 */
.pagination{
    width: 100%;
    /* 实现元素水平居中 */
        display: flex;
        justify-content: center;
}
/* 分页选中页面的背景色 */
>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #242628;
}
/* 分页鼠标悬浮时的字体颜色 */
>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #242628;
    font-weight: 1000;
}
/* loading */
.loading{
    height: 300px;
    width: 100%;
}
/* 修改loading图标颜色 */
>>>.el-loading-spinner .path{
    stroke: #2f3542;
}
>>>.el-loading-mask{
    z-index: 2 ;
    /* background:red !important */
}
/* 清除浮动 */
    .clearfix{
        clear: both;
    }
</style>
